<template>
  <i
    class="ff-icon"
    :class="{ [`ff-icon--${$attrs.type}`]: $attrs.type }"
    :style="customStyles"
    v-bind="$attrs"
  >
    <font-awesome-icon v-bind="props" />
  </i>
</template>

<script setup lang="ts">
import { computed, useAttrs } from 'vue'
import type { IconProps } from './type'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
// import type { FontAwesomeIconProps } from '@fortawesome/vue-fontawesome'
const attrs = useAttrs()
// 使用Ts的Omit来剔除color和type属性
type IconPropsWithoutColorAndType = Omit<IconProps, 'color' | 'type'>
defineOptions({
  name: 'FFIcon',
  inheritAttrs: false,
})
// const omit = <T extends object, K extends keyof T>(object: T, paths: K[]): Omit<T, K> => {
//   const result = {} as any
//   for (const key in object) {
//     if (!paths.includes(key as any)) {
//       result[key] = object[key]
//     }
//   }
//   return result
// }
const props = defineProps<IconPropsWithoutColorAndType>()
console.log(props, 'props')
// const fontawesomeProps = omit(props, ['type', 'color'])
// 使用computed来计算customStyles
const customStyles = computed(() => {
  return attrs.color ? { color: attrs.color } : {}
})
</script>

<style scoped></style>
